<template>
  <div class="input-card" style="width: 200px">
    <h4 style="margin-bottom: 10px; font-weight: 600">利用mouseTool绘制覆盖物</h4>
    <a-button type="primary" @click="drawPolyline()" style="margin-bottom: 5px">绘制线段</a-button>
    <a-button type="primary" @click="drawPolygon()" style="margin-bottom: 5px">绘制多边形</a-button>
    <a-button type="primary" @click="drawRectangle()" style="margin-bottom: 5px">绘制矩形</a-button>
    <a-button type="primary" @click="drawCircle()" style="margin-bottom: 5px">绘制圆形</a-button>
  </div>
  <div ref="wrapRef" :style="{ height, width }"></div>
</template>
<script lang="ts" setup>
  import { nextTick, onMounted, ref, unref } from 'vue';
  import { useScript } from '@/hooks/web/useScript';

  defineOptions({ name: 'AMap' });

  defineProps({
    width: {
      type: String,
      default: '100%',
    },
    height: {
      type: String,
      default: 'calc(100vh - 78px)',
    },
  });

  const A_MAP_URL =
    'https://webapi.amap.com/maps?v=1.4.15&key=99c56da62af9ce27de33875651f8cfb6&plugin=AMap.MouseTool';

  const wrapRef = ref<HTMLDivElement | null>(null);
  const { toPromise } = useScript({ src: A_MAP_URL });

  function drawPolyline() {
    mouseTool.polyline({
      strokeColor: '#3366FF',
      strokeOpacity: 1,
      strokeWeight: 6,
      // 线样式还支持 'dashed'
      strokeStyle: 'solid',
      // strokeStyle是dashed时有效
      // strokeDasharray: [10, 5],
    });
  }

  function drawPolygon() {
    mouseTool.polygon({
      strokeColor: '#FF33FF',
      strokeWeight: 6,
      strokeOpacity: 0.2,
      fillColor: '#1791fc',
      fillOpacity: 0.4,
      // 线样式还支持 'dashed'
      strokeStyle: 'solid',
      // strokeStyle是dashed时有效
      // strokeDasharray: [30,10],
    });
  }

  function drawRectangle() {
    mouseTool.rectangle({
      strokeColor: 'red',
      strokeOpacity: 0.5,
      strokeWeight: 6,
      fillColor: 'blue',
      fillOpacity: 0.5,
      // strokeStyle还支持 solid
      strokeStyle: 'solid',
      // strokeDasharray: [30,10],
    });
  }

  function drawCircle() {
    mouseTool.circle({
      strokeColor: '#FF33FF',
      strokeWeight: 6,
      strokeOpacity: 0.2,
      fillColor: '#1791fc',
      fillOpacity: 0.4,
      strokeStyle: 'solid',
      // 线样式还支持 'dashed'
      // strokeDasharray: [30,10],
    });
  }

  let map;
  let AMap;
  var mouseTool;

  async function initMap() {
    await toPromise();
    await nextTick();
    const wrapEl = unref(wrapRef);
    if (!wrapEl) return;
    AMap = (window as any).AMap;
    map = new AMap.Map(wrapEl, {
      zoom: 11,
      center: [113.544372, 23.329249],
      // viewMode: '3D',
    });
    mouseTool = new AMap.MouseTool(map);
    mouseTool.on('draw', function (event) {
      // event.obj 为绘制出来的覆盖物对象
      const pointList = event.obj.getPath();
      console.info('覆盖物对象绘制完成', pointList);
      let str = '';
      pointList.forEach((item) => {
        str = str + item.lat + ' ' + item.lng + ',';
      });
      console.log('point str ' + str);
    });

    const json = (await (await import('@/assets/gd.json')).default) as any;
    var geojson = new AMap.GeoJSON({
      geoJSON: json,
      // 还可以自定义getMarker和getPolyline
      getPolygon: function (geojson, lnglats) {
        // 计算面积
        var area = AMap.GeometryUtil.ringArea(lnglats[0]);

        return new AMap.Polygon({
          path: lnglats,
          fillOpacity: 1 - Math.sqrt(area / 8000000000), // 面积越大透明度越高
          strokeColor: 'white',
          fillColor: 'red',
        });
      },
    });
    geojson.setMap(map);
  }

  onMounted(async () => {
    await initMap();
  });
</script>
